<template>
  <div>
    <van-button type="primary" @click="$router.push('/')">
      退回上一页
    </van-button>
    <hr />
    <template v-for="item in detailItemArr">
      <ul :key="item.id">
        <li>
          <image-view :src="item.img"></image-view>
        </li>

        <van-button
          style="margin: 20px"
          type="primary"
          @click="$router.push(`/addComments/${item.id}`)"
        >
          点评此书
        </van-button>
      </ul>
    </template>
    <!-- 渲染评论区域 -->

    <template
      v-for="item in commentsArr.filter(
        (v) => v.idBookCard === $route.params.id
      )"
    >
      <CommentsCard :key="item.id" :item="item"></CommentsCard>
    </template>

    <van-button
      type="info"
      style="margin: 20px"
      @click="$router.push('/readPage')"
    >
      阅读此书
    </van-button>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import CommentsCard from '@/components/comments-card.vue'
export default {
  name: 'detail', // 组件内部有这个name
  components: { CommentsCard },
  computed: {
    ...mapState(['detailItemArr', 'commentsArr']),
  },
  activated() {
    this.fetchDetailItem({ id: this.$route.params.id })
  },
  methods: {
    ...mapActions(['fetchDetailItem']),
  },
}
</script>

<style></style>
